<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery.js"></script>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <!--<script src="vconsole.min.js"></script>-->
    <style>
        .noselect {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Chrome/Safari/Opera */
            -khtml-user-select: none; /* Konqueror */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
not supported by any browser */
        }
        
        li {
            margin-top:10px;
            height:60px;
        }
    </style>
</head>
<body>
    <ul class='noselect a' style="font-size:0;overflow:hidden;width:100%;list-style: none;background: gray;padding: 0;">
        <li style="background: blue;width: 100%;white-space: nowrap;" data-value="100">
            <span style="display: inline-block;width: 100%;font-size:1rem; height:100%;background:red;" class="sliding-menu-label">ererara</span>
            <span style="display: inline-block;font-size:1rem;" class="sliding-menu-item"><button onclick="alert('删除')">删除</button><button onclick="alert('编辑')">编辑</button></span>
        </li>
        <li style="background: blue;width: 100%;white-space: nowrap;" data-value="200">
            <span style="display: inline-block;width: 100%;font-size:1rem;height:100%;background:red;" class="sliding-menu-label">ererara</span>
            <span style="display: inline-block;font-size:1rem;" class="sliding-menu-item"><button onclick="alert('删除')">删除</button><button onclick="alert('编辑')">编辑</button></span>
        </li>
        
    </ul>
	<ul class='noselect b' style="font-size:0;overflow:hidden;width:100%;list-style: none;background: gray;padding: 0;">
		<li style="background: blue;width: 100%;white-space: nowrap;" data-value="100">
			<span style="display: inline-block;width: 100%;font-size:1rem; height:100%;background:red;" class="sliding-menu-label">ererara</span>
			<span style="display: inline-block;font-size:1rem;" class="sliding-menu-item"><button onclick="alert('删除')">删除</button><button onclick="alert('编辑')">编辑</button></span>
		</li>
		<li style="background: blue;width: 100%;white-space: nowrap;" data-value="200">
			<span style="display: inline-block;width: 100%;font-size:1rem;height:100%;background:red;" class="sliding-menu-label">ererara</span>
			<span style="display: inline-block;font-size:1rem;" class="sliding-menu-item"><button onclick="alert('删除')">删除</button><button onclick="alert('编辑')">编辑</button></span>
		</li>
	</ul>
<span id="a"></span>
<span id="b"></span>
<span id="c"></span>
<span id="d"></span>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    kkkkkkkkkkkkkkkkkk<br>
    <script>
        ~function () {
			"use strict";
			
			$.fn.slidingMenu = function (option) {
				option = typeof(option) == 'undefined' ? {} : option;
                var config = $.extend({
                    //列选择器
                    rowSelector: 'li',
                    //列菜单选择器
                    menuItemSelector: '.sliding-menu-item',
                    //列label选择器
					labelSelector: '.sliding-menu-label',
                    //超过指定距离开始滑动
                    slideBeginWidth: 20,
                    //隐藏菜单时滑动动画时长
					hideDuration: 250,
					//显示菜单时滑动动画时长
					showDuration: 250,
                    //当滑动距离超过比值则切换, 大于1则为像素距离
                    switchRate: 0.3,
                    //只允许显示一个菜单
                    onlyOne: true,
                    onclick: null,
                    onstart: null,
                    onmoving: null,
                    onend: null,
                    onshow: null,
                    onhide: null
                }, option);
                
                var $frame = $(this);
                var menuItemWrapSelector = config.menuItemSelector;
                var labelSelector = config.labelSelector;
				var $lis = $frame.find('li');
                var touchAvailable = false;
				
				init();

				/**
				 * 重置所有项目的滑动的位置
				 */
				 function resetOthers($this) {
				 	if(window.slidingMenuData) {
						for(var ax=0; ax<window.slidingMenuData.resetElements.length; ax++) {
							var $elms = window.slidingMenuData.resetElements[ax];
							for(var i=0; i<$elms.length; i++) {
								if($this && $this[0] == $elms[i]) {
									continue;
								}

								if($elms[i].slidingMenu.translateX) {
									$elms[i].hideSlidingMenu();
								}
							}
						}
                    }
				}
    
				
				/**
				 * 获取鼠标x的位置
				 */
                function getEventX(e) {
					if(e.touches && e.touches.length > 0) {
					    return e.touches[0].pageX;
                    } else {
						return e.pageX;
                    }
                }
                
                /**
				 * 执行平滑动画
				 */
                function animatedMove($this, x, duration, callback) {
					var transX = $this[0].slidingMenu.translateX;
					var totalPixel = x-transX;
					
					if(totalPixel == 0) {
						typeof callback == 'function' ? callback() : 0;
						return ;
                    }
                    
					$this[0].slidingMenu.busying = true;
                    
					$this.stop().animate({enableSlidingMenuMovingN:0}, 1).animate({enableSlidingMenuMovingN:1000},
						{
							duration:duration,
							step:function(n) {
								var percent = parseFloat(n/1000);
								var currentX = transX + totalPixel * percent;
								$this.css('transform', 'translateX('+ currentX +'px)');
								$this[0].slidingMenu.translateX = currentX;
							},
							complete:function () {
								$this[0].slidingMenu.busying = false;
								$this.animate({enableSlidingMenuMovingN:0}, 1);
								typeof callback == 'function' ? callback() : 0;
							}
						}
					);
                }
                
                /**
				 * 初始化start事件
				 */
                function initLiStartEvent($li) {
					var $obj = $li.find(labelSelector);
					$obj.on('touchstart.slidingmenu mousedown.slidingmenu', function (e) {
						if(window.slidingMenuData.currentElm) {
							return;
                        }
                        
                        if($li[0].slidingMenu.busying) {
							return ;
                        }
						
						if(!touchAvailable && e.type.toLowerCase() == 'touchstart') {
							touchAvailable = true;
                        }
                        
                        if(touchAvailable && e.type.toLowerCase() != 'touchstart') {
							return;
                        }
						
						if($li[0].slidingMenu.moving) {
							return;
                        }
						
						window.slidingMenuData.currentElm = $li;
						
                        $li[0].slidingMenu.isClick = true;
						
						if(config.onlyOne && window.slidingMenuData.activeElm && window.slidingMenuData.activeElm[0] != $li[0]) {
							resetOthers();
							$li[0].slidingMenu.isClick = false;
							$li[0].slidingMenu.moving = true;
						}
                        
                        clearTimeout($li[0].slidingMenu.isClickTimer);
                        $li[0].slidingMenu.isClickTimer = setTimeout(function() {
                        	if($li[0].slidingMenu.isClick) {
								$li[0].slidingMenu.isClick = false;
								$li[0].slidingMenu.moving = true;
                            }
                        }, 200);
						
						$li[0].slidingMenu.movingX = getEventX(e);
						$li[0].slidingMenu.firstTranslateX = $li[0].slidingMenu.translateX;
						$li[0].slidingMenu.firstMouseX = getEventX(e);
						typeof config.onstart == 'function' ? config.onstart.apply(this, e) : 0;
					});
				}
				
				/**
				 * moving事件
				 */
				function initLiMovingEvent($li) {
					var $obj = $li.find(labelSelector);
					$obj.on('touchmove.slidingmenu mousemove.slidingmenu', function (e) {
						if(touchAvailable && e.type.toLowerCase() != 'touchmove') {
							return;
						}
						
                        var $menuItemWrap = $li.find(menuItemWrapSelector);

						var x = getEventX(e) - $li[0].slidingMenu.movingX;
						$li[0].slidingMenu.movingX = getEventX(e);
						x += $li[0].slidingMenu.translateX;

						if($li[0].slidingMenu.isClick) {
							if(Math.abs(getEventX(e) - $li[0].slidingMenu.firstTranslateX) > config.slideBeginWidth) {
								$li[0].slidingMenu.isClick = false;
								$li[0].slidingMenu.moving = true;
							} else {
								e.preventDefault();
								e.stopPropagation();
								return ;
							}
						}

						if(!$li[0].slidingMenu.moving) {
							return;
						}
						
						if(x > 0) {
							return;
						}

						if(x < - $menuItemWrap.width()) {
							return;
						}

						e.preventDefault();
						e.stopPropagation();

						$li[0].slidingMenu.translateX = x;
						$li.css('transform', 'translateX('+ x +'px)');

						typeof config.onmoving=='function' ? config.onmoving.apply(this, e) :  0;
					});
                }
				
				/**
				 * window事件, 滑动结束事件
				 */
				function windowEventHandle(e) {
					if(touchAvailable && e.type.toLowerCase() != 'touchend') {
						return;
					}
					
                    var $this = window.slidingMenuData.currentElm;
					
                    if($this && $this.length > 0) {
						typeof config.onend=='function' ? config.onend.apply(this, e) :  0;
      
						if($this[0].slidingMenu.isClick) {
							clearTimeout($this[0].slidingMenu.isClickTimer);
							if(config.onlyOne && window.slidingMenuData.activeElm) {
								resetOthers();
                            } else {
								typeof config.onclick == 'function' ? config.onclick.apply($this[0]) :0;
                            }
                            
                            $this[0].slidingMenu.isClick = false;
							window.slidingMenuData.currentElm = null;
							return;
						}
						
                        var transX = $this[0].slidingMenu.translateX;
                        var $menuItemWrap = $this.find(menuItemWrapSelector);

                        if($menuItemWrap.length == 0 || !$menuItemWrap.width()) {
                            return;
                        }

                        var enableSlidingMenuFirstTransX = $this[0].slidingMenu.firstTranslateX;
                        var switchWidth = config.switchRate > 1 ? config.switchRate : $menuItemWrap.width()*config.switchRate;
                        $this[0].slidingMenu.moving = false;
						window.slidingMenuData.currentElm = null;
                        
                        if(Math.abs(transX-enableSlidingMenuFirstTransX) > switchWidth) {
                            if(transX < enableSlidingMenuFirstTransX) {
                                $this[0].showSlidingMenu();
                            } else {
                                $this[0].hideSlidingMenu();
                            }
                        } else {
                        	if($this[0].slidingMenu.actived) {
								$this[0].showSlidingMenu();
                            } else {
								$this[0].hideSlidingMenu();
                            }
                        }
                    }
                }
                
                function initEndEvent() {
                	if(config.onlyOne) {
						$frame.find(config.rowSelector).on('touchstart mousedown', function (e) {
							e.stopPropagation();
						});
		
						if(!window.slidingMenuData.windowClickBind) {
							window.slidingMenuData.windowClickBind = true;
							$(document).on('touchstart mousedown', function (e) {
								if(!touchAvailable && e.type.toLowerCase() == 'touchstart') {
									touchAvailable = true;
								}

								if(touchAvailable && e.type.toLowerCase() != 'touchstart') {
									return;
								}
								resetOthers();
							});
                        }
						
					}
     
					$(window).off('.slidingmenu', windowEventHandle);
					$(window).on('touchend.slidingmenu mouseup.slidingmenu', windowEventHandle);
				}
				
				/**
				 * get li元素添加api
				 * @param $li
				 */
				function initLiApi($li) {
					$li[0].hideSlidingMenu = (function($this) {
						return function(callback) {
							if(window.slidingMenuData.activeElm && window.slidingMenuData.activeElm[0] == $this[0]) {
								window.slidingMenuData.activeElm = null;
							}
							
							if(Math.abs($this[0].slidingMenu.translateX) > 0) {
								typeof config.onhide=='function' ? config.onhide.apply($this[0]) : 0;
							}
							
							$this[0].slidingMenu.actived = false;
							if($this[0].slidingMenu.busying && $this[0].slidingMenu.hidding) {
								return;
                            }

							$this[0].slidingMenu.hidding = true;
                            
							animatedMove($this, 0, config.hideDuration, function() {
								$this[0].slidingMenu.hidding = false;
                            	typeof callback == 'function' ? callback():0;
							});
						}
					})($li);

					$li[0].showSlidingMenu = (function($this) {
						return function(callback) {
							var $menuItemWrap = $this.find(menuItemWrapSelector);
							config.onlyOne && resetOthers($this);
							window.slidingMenuData.activeElm = $this;

							$this[0].slidingMenu.actived = true;
							if($this[0].slidingMenu.busying && $this[0].slidingMenu.showing) {
								return;
							}

							$this[0].slidingMenu.showing = true;
							
							if(Math.abs($this[0].slidingMenu.translateX) < $this.find(menuItemWrapSelector).width()) {
								$this[0].slidingMenu.showing = false;
								typeof config.onshow=='function' ? config.onshow.apply($this[0]) : 0;
							}
							
							animatedMove($this, -$menuItemWrap.width(), config.showDuration, callback);
						}
					})($li);
                }
				
                function init() {
					if(!window.slidingMenuData) {
						window.slidingMenuData = {
							resetElements: [],
                            windowClickBind: false
						};
					}
					
					$lis = $frame.find(config.rowSelector);
					initEndEvent();
					
					if(config.onlyOne && $lis.length > 0) {
						window.slidingMenuData.resetElements.push($lis);
                    }
					
					for(var i=0; i<$lis.length; i++) {
						var $li = $($lis[i]);
						
						if($li[0].slidingMenu && $li[0].slidingMenu.init) {
							continue;
						}
						
						$li[0].slidingMenu = {
							translateX: 0,
							init:true,
                            moving: false,
                            movingX: 0,
                            firstTranslateX: 0,
                            actived:false,
                            isClick:false,
							isClickTimeout:0,
							firstMouseX:0
						};

						$li.off('.slidingmenu');
						$li.find(menuItemWrapSelector).off('.slidingmenu');

						initLiStartEvent($li);
						initLiMovingEvent($li);
						initLiApi($li);
					}
                }
                
                $frame[0].resetSlidingMenu = function() {
                    resetOthers();
                };
			}; //func end
		}(jQuery);
		
//		$(window).on('touchstart', function(e){e.preventDefault()})
    </script>

	<script>
		$('ul.a').slidingMenu({
			switchRate:0.3,
			showDuration:150,
			hideDuration:150,
//			onlyOne:true,
			onclick:function() {
//            	console.log($(this).data('value'));
				alert($(this).data('value'));
			}
		});

		$('ul.b').slidingMenu({
			switchRate:0.3,
//			onlyOne:true,
			onclick:function() {
//            	console.log($(this).data('value'));
				alert($(this).data('value'));
			}
		});
	</script>
</body>
</html>